import type { Component } from 'vue'

// 组件类型枚举
export const enum ComponentType {
  INPUT = 'input',
  SELECT = 'select',
  SWITCH = 'switch',
  BUTTON = 'button',
  LINK = 'link',
  COUNTER = 'counter',
  DIVIDER = 'divider',
  TEXT = 'text',
  REMOTE_INPUT = 'remote-input'
}

// 组件分组枚举
export const enum ComponentGroupEnum {
  FORM = 'form',
  LAYOUT = 'layout',
  AUXILIARY = 'auxiliary'
}

// 组件分组标题映射
export const ComponentGroupTitles: Record<ComponentGroupEnum, string> = {
  [ComponentGroupEnum.FORM]: '表单组件',
  [ComponentGroupEnum.LAYOUT]: '布局组件',
  [ComponentGroupEnum.AUXILIARY]: '辅助组件'
}

// 组件分组接口
export interface ComponentGroup {
  group: ComponentGroupEnum
  title: string
  children: ComponentDefinition[]
}

// 组件属性接口
export interface ComponentProps {
  base: Record<string, any>
  style: Record<string, any>
}

// 组件定义接口
export interface ComponentDefinition {
  type: ComponentType
  name: string
  icon?: Component
  group: ComponentGroupEnum
  component?: Component
  props: ComponentProps
  propertyPanel?: Component
  template?: string
  category?: string
}

// 组件实例接口
export interface ComponentInstance {
  id: string
  type: ComponentType
  props: ComponentProps
  sort: number
  category?: string
}

// 页面配置接口
export interface PageConfig {
  components: ComponentInstance[]
  formData: Record<string, any>
  validation: Record<string, boolean>
  layout: {
    type: string
    gutter: number
    responsive: boolean
  }
  settings: {
    theme: string
    responsive: boolean
    spacing: {
      padding: string
      margin: string
    }
  }
}

// 组件元数据接口
export interface ComponentMetadata {
  type: string
  category?: string
  label?: string
  icon?: any
  group?: string
}

// 插件组件接口
export interface PluginComponent {
  metadata: ComponentMetadata
  props: ComponentProps
  template: string
} 